<template>
  <view class="container">
   
    <!-- 上方输出框 -->
    <van-cell-group inset class="text-box output">
      <van-field
        v-model="outputText"
        type="textarea"
        placeholder="转义后的文本将显示在这里"
        readonly
        :autosize="{ minHeight: 150 }"
        class="textarea"
      />
    </van-cell-group>

    <!-- 中间转换提示 -->
    <view class="converter">
      <view class="converter-content">
        <van-icon name="arrow-down" size="28" class="arrow" />
        <span class="converter-text">文本转义</span>
        <van-icon name="arrow-up" size="28" class="arrow" />
      </view>
    </view>

    <!-- 下方输入框 -->
    <van-cell-group inset class="text-box input">
      <van-field
        v-model="inputText"
        type="textarea"
        placeholder="请输入需要转义的文本"
        :autosize="{ minHeight: 150 }"
        class="textarea"
      />
    </van-cell-group>

    <!-- 转换按钮 -->
    <van-button 
      type="primary" 
      block 
      @click="convertText"
      class="convert-btn"
      size="large"
    >
      转义
    </van-button>
   
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const inputText = ref('')
const outputText = ref('')

const convertText = () => {
  if (!inputText.value) {
    showToast({
      message: '请输入需要转义的文本',
      position: 'top',
    })
    return
  }
  
  // 这里实现文本转义逻辑
  // 示例：将特殊字符转义为HTML实体
  outputText.value = inputText.value
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;')
}
</script>

<style lang="scss">
.container {
  padding: 16px;
  height: 95vh;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  overflow: hidden;  // 禁止容器滚动
}

// 添加全局样式
page {
  overflow: hidden;  // 禁止页面滚动
  background-color: #f7f8fa;
}

.text-box {
  &.output {
    flex: 0.4;
  }
  
  &.input {
    flex: 0.4;
    margin-top: -50px;
  }

  :deep(.van-cell-group) {
    background: transparent;
  }

  :deep(.van-field) {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
  }

  :deep(.van-field__body) {
    height: 100%;
  }

  :deep(.van-field__control) {
    height: 100%;
    min-height: 150px;
    font-size: 15px;
    line-height: 1.6;
    color: #323233;
  }

  :deep(.van-field__placeholder) {
    color: #969799;
  }
}

.converter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  flex: 0.1;
}

.converter-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.converter-text {
  font-size: 16px;
  font-weight: 600;
  color: #323233;
  letter-spacing: 1px;
}

.arrow {
  color: #1989fa;
}

.convert-btn {
  flex: 0.05;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.2);
}
</style>
